<template>
    <div class="bx-editor">
        <van-nav-bar
                title="信息编辑"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px "></div>
        <div class="title">
            基本信息
        </div>
        <div>
            <van-cell-group>
                <van-field v-model="name" label="合作客户名称" placeholder="请填写合作客户名称" size="large"  />
                <van-field v-model="mobile" label="联系方式" placeholder="" size="large"  />

                <van-field readonly clickable  label="通讯地址" :value="`${province}-${city}-${area}`" placeholder="--请选择--" @click="addressPopupShow = true" />
                <van-popup v-model="addressPopupShow" position="bottom">
                    <van-area ref="area" value="110000" :area-list="areaList" @confirm="confirmAddress" @cancel="addressPopupShow = false" />
                </van-popup>

                <van-field v-model="address" label="详细地址" placeholder="" size="large"  />

                <van-field readonly clickable  label="所属行业" :value="industryName" placeholder="--请选择--" @click="industryPickerShow = true" />
                <van-popup v-model="industryPickerShow" position="bottom">
                    <van-picker show-toolbar :columns="industrySource" :default-index="industryIndex" value-key="name" @cancel="industryPickerShow = false" @confirm="onIndustry" />
                </van-popup>
                <van-field readonly clickable  label="合作客户类型" :value="channelName" placeholder="--请选择--" @click="clientPicker = true" />
                <van-popup v-model="clientPicker" position="bottom">
                    <van-picker show-toolbar :columns="channelSource" :default-index="channelIndex" value-key="name" @cancel="clientPicker = false" @confirm="onClient" />
                </van-popup>

                <van-field v-model="price" label="价格" placeholder="" size="large"  />

                <!-- <van-field readonly clickable  label="所属业务员" :value="businessMan" placeholder="--请选择--" @click="salesmanPicker = true" />
                <van-popup v-model="salesmanPicker" position="bottom"></van-popup> -->
                <checkboxGroup :selectType="0" :labelText="'共享业务员'" :nameVal="salesmanName" :dataSource="salesmanSource" :dataVal="salesmanValArr" @selectResult="selectResult" v-if="LoadComplete" />

                <div class="radio">
                    <div>是否产生佣金</div>
                    <van-radio-group v-model="is_brokerage">
                        <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                        <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                    </van-radio-group>
                </div>
                <van-field v-model="brokerage" v-if="is_brokerage == 1 " label="佣金金额" placeholder="" size="large"  />
                <van-field v-model="remark" rows="3" autosize label="特殊要求备注" type="textarea" placeholder="请输入特殊要求备注" show-word-limit />
                <van-field v-model="cooperation" rows="3" autosize label="可延伸合作机会" type="textarea" placeholder="请输入可延伸的合作机会" show-word-limit />
            </van-cell-group>
        </div>
        <div class="title">
            发票信息
        </div>
        <div>
            <van-cell-group>
                <div class="radio">
                    <div>是否允许后付款</div>
                    <van-radio-group v-model="lag_pay">
                        <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                        <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                    </van-radio-group>
                </div>
                <div class="radio">
                    <div>付款方式</div>
                    <van-radio-group v-model="payment_type">
                        <van-radio v-for="(item, index) in payTypeSource" :key="index" :name="item.id" checked-color="#366cb3">{{item.name}}</van-radio>
                    </van-radio-group>
                </div>

                <van-field readonly clickable  label="发票类型" :value="invoiceTypeName" placeholder="--请选择--" @click="invoicePickerShow = true" />
                <van-popup v-model="invoicePickerShow" position="bottom">
                    <van-picker show-toolbar :columns="invoiceTypeSource" :default-index="invoiceTypeIndex" value-key="name" @cancel="invoicePickerShow = false" @confirm="onInvoice" />
                </van-popup>

                <van-field readonly clickable  label="开票类型" :value="invoiceClassName" placeholder="--请选择--" @click="invoiceClassPickerShow = true" />
                <van-popup v-model="invoiceClassPickerShow" position="bottom ">
                    <van-picker show-toolbar :columns="invoiceClassSource" :default-index="invoiceClassIndex" value-key="name" @cancel="invoiceClassPickerShow = false" @confirm="onMakeInvoice" />
                </van-popup>

                <van-field readonly clickable  label="发票名称" :value="invoiceNameName" placeholder="--请选择--" @click="invoiceNameShow = true" />
                <van-popup v-model="invoiceNameShow" position="bottom">
                    <van-picker show-toolbar :columns="invoiceNameSource" :default-index="invoiceNameIndex" value-key="name" @cancel="invoiceNameShow = false" @confirm="onInvoiceName" />
                </van-popup>
                <van-field v-if="invoiceNameName == '自定义'" v-model="new_invoice_name" label="自定义发票名称" placeholder="" size="large"  />
                <van-field v-model="invoice_company" label="公司名称" placeholder="" size="large"  />
                <van-field v-model="invoice_tax_code" label="税号" placeholder="" size="large"  />
                <van-field v-model="invoice_address" label="公司地址" placeholder="" size="large"  />
                <van-field v-model="invoice_mobile" label="公司联系电话" placeholder="" size="large"  />
                <van-field v-model="invoice_bank" label="开户行" placeholder="" size="large"  />
                <van-field v-model="invoice_bank_code" label="开户账号" placeholder="" size="large"  />
                <div class="radio">
                    <div>是否见票付款</div>
                    <div style="flex-wrap: nowrap">
                        <van-radio-group v-model="invoice_pay">
                            <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                            <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                        </van-radio-group>
                    </div>
                </div>
                <van-field v-model="invoice_remark" rows="3" autosize label="开票备注" type="textarea" placeholder="请输入备注" show-word-limit />

            </van-cell-group>
        </div>

        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo">保存</div>
            <!-- <div class="red-btn">取消</div> -->
        </div>

    </div>
</template>

<script>
import AddressEdit from '../../../plugins/area'
import checkboxGroup from '@/components/checkboxGroup.vue'
export default {
    name: "bxEditor",
    components: {
        checkboxGroup, checkboxGroup
    },
    data() {
        return {
            LoadComplete: false,
            userId: '',

            salesmanValue: '',
            salesmanPicker: false,

            salesmanName: '',
            salesmanValArr: [],
            salesmanSource: [],


            invoiceTypeName: '',
            invoiceTypeIndex: 0,
            invoicePickerShow: false,
            invoiceTypeSource: [],

            invoiceClassName: '',
            invoiceClassIndex: 0,
            invoiceClassPickerShow: false,
            invoiceClassSource: [],

            invoiceNameName: '',
            invoiceNameIndex: 0,
            invoiceNameShow: false,
            invoiceNameSource: [], //发票名称

            payTypeSource: [], // 付款方式
            moneyRadio: '1',
            isVoucherRadio: '1',
            paymentRadio: '1',
            mask: '',

            addressPopupShow: false,
            site: '',
            areaList: AddressEdit,


            name: '', //合作客户名称
            mobile: '', //联系方式	
            province: '', //省	
            provinceCode: '', //省	
            city: '', //市	
            cityCode: '', //市	
            area: '', //区	
            areaCode: '', //区	
            address: '', //详细地址
            industryIndex: '', //所属行业
            industryName: '', //所属行业
            industryPickerShow: false,
            industrySource: [
                {
                    name: ''
                }
            ],

            channelIndex: 0,
            channelName: 0,
            clientPicker: false,
            channelSource: [
                {
                    name: ''
                }
            ], //客户类型


            price: '', //价格
            salesman_id: '', //共享业务员（非必填）
            is_brokerage: 0, //是否产生佣金
            brokerage: '', //佣金
            remark: '', //特殊要求备注
            cooperation: '', //可延伸合作机会
            lag_pay: 0, //是否允许后付款
            payment_type: 1, //付款方式
            need_invoice: '', //是否需要发票，1需要，0不需要
            invoice_type: '', //发票类型，1电子发票，2纸质发票
            invoice_class: '', //开票类型
            invoice_name: '', //发票名称
            new_invoice_name: '', //自定义发票名称
            invoice_company: '', //公司名称
            invoice_tax_code: '', //税号
            invoice_address: '', //公司地址
            invoice_mobile: '', //公司电话	
            invoice_bank: '', //开户行
            invoice_bank_code: '', //开户账号
            invoice_pay: 0, //是否见票付款，1是，0否
            invoice_remark:'',//开票备注

            salesnameSource: [],
            value: '',
            students: [],
            showSelect: false,
            businessMan: [],

        }
    },
    methods: {
        getConfig() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: this.$route.query.type,
            };
            this.$post("/api/member/get_config_info", params)
                .then(res => {
                    if (res.code == 1) {
                        this.invoiceTypeSource = res.data.invoice_type // 发票类型
                        this.invoiceClassSource = res.data.invoice_class // 开票类型
                        this.invoiceNameSource = res.data.invoice_name // 发票名称	
                        this.industrySource = res.data.industry //  所属行业
                        this.payTypeSource = res.data.payment_type //  付款方式
                        this.channelSource = res.data.channel //  付款方式


                        // 筛选 业务专员选中的选项
                        this.salesmanSource = res.data.salesname // 业务专员
                        let salesmanValArr = []
                        let salesmanNameArr = []
                        res.data.salesname.map((item, index) => {
                            if (item.selected) {
                                salesmanValArr.push(item.value)
                                salesmanNameArr.push(item.name)
                            }
                        })
                        this.salesmanValArr = salesmanValArr
                        this.salesmanName = salesmanNameArr.toString(',')


                        this.getInfo();
                    }
                })
                .catch(err => { });
        },
        getInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: this.$route.query.type,
            };
            this.$post("/api/member/read", params)
                .then(res => {
                    if (res.code == 1) {
                        this.userId = res.data.id //合作客户名称
                        this.name = res.data.name //合作客户名称
                        this.mobile = res.data.mobile //联系方式	
                        this.province = res.data.province //省	
                        this.city = res.data.city //市	
                        this.area = res.data.area //区	
                        this.address = res.data.address //详细地址
                        // this.industry = res.data.industry //所属行业
                        //  付款方式
                        this.channelSource.map((item, index) => {
                            if (item.name == res.data.cooperation_name) {
                                this.channelIndex = index
                                this.channelName = item.name
                            }
                        })
                        //  所属行业
                        this.industrySource.map((item, index) => {
                            if (item.name == res.data.industry_name) {
                                this.industryIndex = index
                                this.industryName = item.name
                            }
                        })
                        // 发票类型
                        this.invoiceTypeSource.map((item, index) => {
                            if (item.id == res.data.invoice_type) {
                                this.invoiceTypeIndex = index
                                this.invoiceTypeName = item.name
                            }
                        })
                        // 开票类型
                        this.invoiceClassSource.map((item, index) => {
                            if (item.id == res.data.invoice_class) {
                                this.invoiceClassIndex = index
                                this.invoiceClassName = item.name

                            }
                        })

                        // 发票名称
                        this.invoiceNameSource.map((item, index) => {
                            if (item == res.data.invoice_name) {
                                this.invoiceNameIndex = index
                                this.invoiceNameName = item
                                // this.new_invoice_name = item

                            }
                        })

                        // this.invoice_type = res.data.invoice_type //发票类型
                        this.price = res.data.price //价格
                        this.salesman_id = res.data.salesman_id //共享业务员（非必填）
                        this.is_brokerage = Number(res.data.is_brokerage) //是否产生佣金
                        this.brokerage = res.data.brokerage //佣金
                        this.remark = res.data.remark //特殊要求备注

                        this.cooperation = res.data.cooperation //可延伸合作机会
                        this.lag_pay = res.data.lag_pay //是否允许后付款
                        this.payment_type = res.data.payment_type //付款方式
                        this.need_invoice = res.data.need_invoice //是否需要发票，1需要，0不需要
                        this.invoice_type = res.data.invoice_type //发票类型，1电子发票，2纸质发票
                        // this.invoice_class = res.data.invoice_class //开票类型
                        // this.invoice_name = res.data.invoice_name //发票名称
                        this.invoice_company = res.data.invoice_company //公司名称
                        this.invoice_tax_code = res.data.invoice_tax_code //税号
                        this.invoice_address = res.data.invoice_address //公司地址
                        this.invoice_mobile = res.data.invoice_mobile //公司电话	
                        this.invoice_bank = res.data.invoice_bank //开户行
                        this.invoice_bank_code = res.data.invoice_bank_code //开户账号
                        this.invoice_pay = res.data.invoice_pay //是否见票付款，1是，0否
                        this.invoice_remark = res.data.invoice_remark //开票备注
                        this.$Toast.clear();
                        // console.log(this.areaList)


                        this.LoadComplete = true
                    }
                })
                .catch(err => { });
        },
        pushInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: this.$route.query.type,
                id: this.userId,

                name: this.name, //合作客户名称
                mobile: this.mobile, //联系方式	
                province: this.province, //省	
                city: this.city, //市	
                area: this.area, //区	
                address: this.address, //详细地址

                price: this.price,//价格
                salesman_id: this.salesmanValArr.toString(','),
                is_brokerage: Number(this.is_brokerage), //是否产生佣金
                brokerage: this.brokerage,//佣金
                remark: this.remark, //特殊要求备注
                cooperation_classification: this.channelSource[this.channelIndex].id, //付款方式
                industry: this.industrySource[this.industryIndex].id, //所属行业
                invoice_type: this.invoiceTypeSource[this.invoiceTypeIndex].id, //所属行业
                invoice_class: this.invoiceClassSource[this.invoiceClassIndex].id, //开票类型
                invoice_name: this.invoiceNameSource[this.invoiceNameIndex], //发票名称

                cooperation: this.cooperation, //可延伸合作机会
                lag_pay: this.lag_pay, //是否允许后付款
                payment_type: this.payment_type, //付款方式
                need_invoice: this.need_invoice, //是否需要发票，1需要，0不需要
                invoice_type: this.invoice_type,//发票类型，1电子发票，2纸质发票
                // this.invoice_class = res.data.invoice_class //开票类型
                // this.invoice_name = res.data.invoice_name //发票名称
                new_invoice_name: this.new_invoice_name, //发票名称
                invoice_company: this.invoice_company,//公司名称
                invoice_tax_code: this.invoice_tax_code, //税号
                invoice_address: this.invoice_address, //公司地址
                invoice_mobile: this.invoice_mobile, //公司电话	
                invoice_bank: this.invoice_bank, //开户行
                invoice_bank_code: this.invoice_bank_code, //开户账号
                invoice_pay: this.invoice_pay, //是否见票付款，1是，0否
                invoice_remark:this.invoice_remark,//开票备注

            };

            this.$post("/api/member/save", params)
                .then(res => {
                    if (res.code == 1) {
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1500);
                        this.$Toast(res.msg);
                    } else {
                        this.$Toast(res.msg);
                    }
                })
                .catch(err => { });
        },
        // 所属行业
        onIndustry(value, index) {
            this.industryIndex = index;
            this.industryName = value.name
            this.industryPickerShow = false;
        },
        // 合作客户类型
        onClient(value, index) {
            this.channelIndex = index;
            this.channelName = value.name
            this.clientPicker = false;
        },
        // 合作客户类型
        onSalesman(value, index) {
            this.salesmanValue = value;
            this.salesmanPicker = false;
        },
        // 发票类型
        onInvoice(value, index) {
            this.invoiceTypeIndex = index;
            this.invoiceTypeName = value.name
            this.invoicePickerShow = false;
        },
        // 开票类型
        onMakeInvoice(value, index) {
            this.invoiceClassIndex = index;
            this.invoiceClassName = value.name
            this.invoiceClassPickerShow = false;
        },
        // 公司名称
        onInvoiceName(value, index) {
            this.invoiceNameIndex = index;
            this.invoiceNameName = value
            this.invoiceNameShow = false;
        },
        // 地址确认
        confirmAddress(value) {
            console.log(value);
            this.province = value[0].name
            this.provinceCode = value[0].code

            this.city = value[1].name
            this.cityCode = value[1].code

            this.area = value[2].name
            this.areaCode = value[2].code

            this.addressPopupShow = false
        },
        // 业务人员多选回调
        selectResult(type, title, Arr, val3) {
            if (type == 0) {
                this.salesmanName = title
                this.salesmanValArr = Arr
            }
            if (type == 1) {
                this.customerName = title
                this.customerValArr = Arr
            }
            if (type == 2) {
                this.financeName = title
                this.financeValArr = Arr
            }
            if (type == 3) {
                this.compensateName = title
                this.compensateValArr = Arr
            }
        },
    },
    created() {
        this.$Toast.loading({
            duration: 0, // 持续展示 toast
            message: '加载中...',
            forbidClick: true
        });

        this.getConfig();

    },
}
</script>

<style scoped lang="less">
.radio {
    display: flex;
    align-items: center;
    padding: 10px 15px;

    > div:nth-of-type(1) {
        width: 116px;
        font-size: 13px;
        color: #323233;
    }

    > div:nth-of-type(2) {
        font-size: 12px;
    }
}

.selects-box {
    display: flex;
    align-items: center;
    padding: 10px 10px;

    > div:nth-of-type(1) {
        width: 116px;
    }

    > div:nth-of-type(2) {
        border: 1px solid #dcdcdc;
        border-radius: 3px;
        flex: 1;
        height: 30px;
    }
}

.businessMan-box {
    /*height: 100px;*/
}

.foot-btn {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>